@import "reset";
@function r($px) {
    @return $px/40*1rem;
}


@mixin img {
    img {
        overflow: hidden;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
 @keyframes abc {
                    0% {
                        
                        transform: scale(3) rotate(0deg);
                    }
                    25% {
                        
                        transform: scale(3) rotate(90deg);
                    }
                    50% {
                         
                        transform: scale(3) rotate(180deg);
                    }
                    75% {
                        transform: scale(3) rotate(270deg);
                    }
                    100% {
                        transform: scale(3) rotate(360deg);
                    }
                }

.web {
//  display: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/bj.png) no-repeat 50% 50% / cover;
    z-index: 51;
    .cont {
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
        position: relative;
        .bjdh {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0.5;
                overflow: hidden;
            img:first-of-type{
                width: 120%;
                height: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
                animation: abc 5s infinite linear;
                transform-origin:center center;
                z-index: 5;
            }
            img:last-of-type{
                width: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
                opacity: 0.1;
                z-index: 1;
            }
        }
        .kaig {
            z-index: 10;
            width: r(207);
            height: r(190);
            position: absolute;
            top: 55%;
            left: 53%;
            transform: translate(-50%, -50%);
            @include img;
        }
        .wenzi {
            width: 100%;
            height: r(320);
            position: relative;
            margin: 0 auto;
            padding-top: r(10);
            .yyy{
                width: r(400);
                height: r(211);
                position: absolute;
                top: 0;
                left: r(27);
                img {
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .zd{
                width: r(95);
                height: r(130);
                position: absolute;
                top: r(10);
                right: r(-40);
                overflow: hidden;
            img {
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 50;
            }
            }
            .yd{
                width: r(96);
                height: r(90);
                position: absolute;
                top: r(60);
                right: r(-108);
                overflow: hidden;
               img {
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 50;
            }
            }
        }
            }
            .zzz{
                width: r(400);
                height: r(150);
                position: absolute;
                top: r(140);
                left: r(122);
                overflow: hidden;
                img {
                width: 95%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            }
            .game{
                width: r(217);
                height: r(72);
                position: absolute;
                top: r(30);
                right: 0;
                overflow: hidden;
                img {
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 99;
            }
            }
        .pz {
            width: r(180);
            height: r(411);
            margin: 0 auto;
            margin-top: r(10);
            position: relative;
            @include img;
            opacity: 0.8;
        }
        .but {
            width: r(328);
            height: r(100);
            margin: 0 auto;
            margin-top: r(19);
            overflow: hidden;
            position: relative;
            @include img;
            z-index: 50;
            .tuwen {
                width: r(264);
                height: r(55);
                @include img;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                overflow: hidden;
            }
        }
        .but2{
            width: r(328);
            height: r(100);
            margin: 0 auto;
            margin-top: r(28);
            overflow: hidden;
            position: relative;
            @include img;
            z-index: 50;
            .tuwen2 {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: r(182);
                height: r(53);
                @include img;
                position: relative;
                overflow: hidden;
            }
        }
    }
    .sm{
    width: 100%;
    height: 100%;
    background: url(../img/beijing.png) no-repeat 50% 50% / cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index:99;
    overflow: hidden;
    transform: scale(0);
         img:first-of-type {
                width: 94%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 50;
            }
            .sx{
                width: r(60);
                height: r(54);
                position: absolute;
                bottom: r(20);
                right: r(20);
                overflow: hidden;
                img{
                    width: 100%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
}
}

